import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import EChartsLayer from '../packages/mapbox-gl-echarts-layer/lib/index'

mapboxgl.accessToken =
  'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2wwM2E4a2drMDVrZjNrcGRucHIxOHo0cyJ9.0ecG5KGQE6R-SmhxvLvhHg'
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/huanglii/ckqt08oxg1kcc18ub9vowurqd?optimize=true',
  bounds: [
    [105.289838, 32.204171],
    [110.195632, 28.164713],
  ],
  fitBoundsOptions: {
    padding: { top: 10, bottom: 10, left: 10, right: 10 },
  },
})

map.on('load', () => {
  const data = [
    { name: '涪陵区', value: [107.384728, 29.705364, 15] },
    { name: '渝中区', value: [106.565204, 29.555761, 20] },
    { name: '沙坪坝区', value: [106.452283, 29.543723, 24] },
    { name: '南岸区', value: [106.641061, 29.503544, 17] },
    { name: '北碚区', value: [106.391793, 29.807495, 12] },
    { name: '綦江区', value: [106.64761, 29.031223, 10] },
    { name: '大足区', value: [105.71809, 29.709322, 12] },
    { name: '渝北区', value: [106.627442, 29.720893, 12] },
    { name: '巴南区', value: [106.53688, 29.405196, 12] },
    { name: '黔江区', value: [108.766614, 29.536555, 12] },
    { name: '长寿区', value: [107.076865, 29.860372, 12] },
    { name: '江津区', value: [106.255498, 29.292994, 15] },
    { name: '合川区', value: [106.272908, 29.975394, 18] },
    { name: '永川区', value: [105.923646, 29.359118, 5] },
    { name: '南川区', value: [107.094714, 29.160315, 16] },
    { name: '璧山区', value: [106.223599, 29.594697, 5] },
    { name: '铜梁区', value: [106.052475, 29.84725, 13] },
    { name: '潼南区', value: [105.836863, 30.194192, 5] },
    { name: '荣昌区', value: [105.590602, 29.407506, 15] },
    { name: '开州区', value: [108.388356, 31.163047, 16] },
    { name: '梁平区', value: [107.76527, 30.656713, 10] },
    { name: '城口县', value: [108.660037, 31.949894, 12] },
    { name: '丰都县', value: [107.726387, 29.866134, 10] },
    { name: '垫江县', value: [107.328478, 30.329991, 10] },
    { name: '忠县', value: [108.033505, 30.302183, 10] },
    { name: '云阳县', value: [108.692762, 30.932934, 10] },
    { name: '万州区', value: [108.403998, 30.809981, 10] },
    { name: '奉节县', value: [109.459151, 31.020697, 10] },
    { name: '巫山县', value: [109.874449, 31.077103, 10] },
    { name: '巫溪县', value: [109.565328, 31.400913, 10] },
    { name: '石柱土家族自治县', value: [108.109488, 30.002104, 10] },
    { name: '秀山土家族苗族自治县', value: [109.002577, 28.451425, 10] },
    { name: '酉阳土家族苗族自治县', value: [108.763496, 28.844468, 5] },
    { name: '彭水苗族土家族自治县', value: [108.161257, 29.297059, 5] },
    { name: '万盛区', value: [106.934677, 28.971242, 2] },
    { name: '武隆区', value: [107.755067, 29.32831, 5] },
  ]
  const option = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: 'Apple',
        type: 'scatter',
        data: data,
        symbolSize: (val) => {
          return val[2]
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: '{b}',
          position: 'right',
        },
        emphasis: {
          label: {
            show: false,
          },
        },
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        data: data
          .sort((a, b) => {
            return b.value[2] - a.value[2]
          })
          .slice(0, 6),
        symbolSize: (val) => {
          return val[2]
        },
        encode: {
          value: 2,
        },
        rippleEffect: {
          brushType: 'stroke',
        },
        label: {
          formatter: '{b}',
          position: 'right',
        },
        emphasis: {
          scale: true,
          label: {
            show: true,
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#333',
        },
      },
    ],
  }

  const layer = new EChartsLayer('layer-id', option)
  map.addLayer(layer)
})
